<template>
<div class="hy-weiper">
  <div class="swiper"><slot name="indicator"></slot></div>
  <slot name="indicator"></slot>
  <div class="indicator">
      <slot name="indicator">
        <div class="indi-item"></div>
      </slot>
  </div>
</div>
</template>

<script>
export default {
  name: "Swiper",
  props:{
    interval:{               //轮播时间
      type:Number,
      default:3000,
    },
    animDuration:{           //轮播显示时间
      type:Number,
      defaule:3000
    },
    moveRation:{           //滑动到三分之一自动到下一张
      type:Number,
      default:0.25
    },
    showIndicator:{         //是否显示圆点
      type:Boolean,
      default:true
    },
    data:function (){
      return {
        slideCount:0,       //元素个数
        totalWidth:0,       //swiper的宽度
        swiperStyle:{},      //swiper的样式
        currenIndex:1,      //挡前index
        scrollling:false,  //是否在滚动
      }
    },
    mounted:function (){
      setTimeout(() =>{
        //操作DOM，在前面加slide
        this.handleDom();
         //开启定时器
        this.startTimer();
      },1000)
    },
    methods:{
      //定时器操作
      startTimer:function (){
        this.playTimer =window.setInterval(() =>{
          this.currenIndex++;
          this.scrollContent(-this.currenIndex * this.totalWidth);
        },this.interval)
      },
      stopTimer:function (){
        window.clearInterval(this.playTimer);
      },


      //滚动到正确位置

      scrollContent:function (currentPostition){
       //0设置正在滚动
        this.scrolllig = true;

        //1.开始滚动
         this.swiperStyle.transition ='transform' + this.aniuDuration + "ms";
         this.setTransform(currentPostition);

         //2.判断滚动的位置
        this.checkPosition();

        //3.滚动完成
        this.scrolling=true;
      }
    }



}
}
</script>

<style scoped>

</style>